import { Component } from "react";
import { Route, Link, NavLink, Switch, Redirect } from "react-router-dom";

import Home from "./views/Home";
import About from "./views/About";

export default class App extends Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <hr />
        <div className="container">
          <div className="left">
            <NavLink to="/home" activeClassName="abcd">
              go Home
            </NavLink>{" "}
            <br />
            <NavLink to="/about" activeClassName="abcd">
              go About
            </NavLink>
          </div>
          <div className="right">
            {/* 
              这里要根据URL地址渲染不同的组件
              /      => Home
              /home  => Home
              /about => About

                1. 默认情况下 路由匹配规则是：从上往下依次匹配，当匹配成功之后不会停止匹配
                2. 使用 Switch 组件包裹的情况下，路由匹配规则是：从上往下依次匹配，当匹配成功之后会停止配置
                3. Route 的编写顺序是有要求的，短的需要放置在最后
            */}
            <Switch>
              <Route path="/home" component={Home} />
              <Route path="/about" component={About} />
              <Redirect from="/abcd" to="/home" />
            </Switch>
          </div>
        </div>
      </div>
    );
  }
}
